<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery/jquery-1.12.4.min.js"></script>

<body>
    <ul>
        <!-- 0 -->
        <li>11</li>
        <!-- 1 -->
        <li>22</li>
        <!--   <div>000</div>
        <div>444</div> -->
        <!-- 2 -->
        <li>333</li>
        <!-- 3 -->
        <li>4444</li>
        <!-- 4 -->
        <li class="item5">555</li>
        <li class="item6">666</li>
        <li class="item7">
            <span>777</span>
        </li>
        <span>9888</span>
        <li>9999</li>
    </ul>
    <script>
        // 选择第一个元素
        console.log($('li:first'));
        // 选择最后一个元素
        console.log($('li:last'));
        // 选择所有匹配的元素中，不是div
        console.log($('li:not(div)'));
        // 先去匹配你要的元素，在这个层级中不是li的
        // console.log($('ul>not(li)'));
        // console.log($('li:not(li)'));
        console.log($('div:not(li)'));
        //选取范围0-3不包含起始位置 包含结束位置
        console.log($('li:gt(0):lt(3)'));
        /* 属性选择 */
        console.log($('li[class]'));
        console.log($('li[class="item5"]'));
        /* 选取ul中第2个元素 */
        console.log($('ul>li'));
        // 获取第2个元素，eq函数中传入下标，就能获取当前下标对应的元素jQuery对象
        // 首次调用jQuery对象原型对象上的方法
        console.log($('ul>li').eq(1));
        console.log($('ul>li:eq(2)'));
        console.log($('ul>li').first());
        console.log($('ul>li').last());
        /* 过滤 */
        console.log($('ul>li').filter('[class="item5"]'));
        // 不是class为item5的所有元素
        console.log($('ul>li').not('[class="item5"]'));
        // ul下面的li标签中有span子标签的元素
        console.log($('ul>li').has('span'));

        console.log($('ul').children());

        console.log($('ul').children('span'));
        // jQuery的链式调用  总结了 面试题
        console.log($('ul').children('.item7').children('span'));

        console.dir($('ul').children('.item7').children('span')[0]);

        // 查找li中包含span的元素
        console.log($('ul>li').find('span'));
        // 查找.item6的父级元素
        console.log($('.item6').parent());

        // 获取当前元素的上面的所有的兄弟元素
        console.log($('.item6').prevAll('li'));
        // 获取当前元素的上面挨着的兄弟元素
        console.log($('.item6').prev('li'));
        // 获取当前元素的下一个兄弟元素
        console.log($('.item6').next());
        // 获取当前元素的下面所有的兄弟元素
        console.log($('.item6').nextAll());
        // 传参就是获取参数中的类型的兄弟元素，不传参就是同级的所有

        // 获取前后所有的兄弟元素
        console.log($('.item6').siblings('li'));
        console.log($('.item6').siblings());


    </script>
</body>

</html>